<template>
<div 
    class="link-bt" 
    @click="onCopy">
    <i class="el-icon-link"></i>
    Link
</div>
</template>

<script>
//链接按钮组件
export default {
    name:'Link',
    props:{
        link:{ 
            type:String,
            default:'',
        },
    },
    methods:{
        onCopy(){
            this.$copyText("https://color.dumogu.top"+this.link).then(()=>{
                this.$notify({
                    title: '已复制链接！',
                    message: '希望该配色方案您能喜欢！',
                    position: 'bottom-right',
                });
            }).catch(()=>{
                return;
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.link-bt{
    border-radius: 4px;
    transition: all .1s;
    box-sizing: border-box;
    text-align: center;
    color: #3a3a59;
    background-color: #fff;
    line-height: 1.3rem;
    cursor: pointer;
    border: 1px solid #e9f2f9;
    font-size: 1.3rem;
    padding: 10px;
    font-weight: bold;
    transition: all 0.2s;
    &:hover{
        background-color: #f5fcff;
    }
}
</style>

